<template>
    <div>
        <div style="margin-bottom: 10px">
            <AssemblyItem type="CPU" :index="addAssStore.cpu_index" :data="addAssStore.cpu_Info" />
        </div>
        <div style="margin-bottom: 10px">
            <AssemblyItem type="主板" :index="addAssStore.mainboard_index" :data="addAssStore.mainboard_Info" />
        </div>
        <div style="margin-bottom: 10px">
            <AssemblyItem type="内存" :index="addAssStore.memory_index" :data="addAssStore.memory_Info" />
        </div>
        <div style="margin-bottom: 10px">
            <AssemblyItem type="GPU" :index="addAssStore.gpu_index" :data="addAssStore.gpu_Info" />
        </div>
        <div style="margin-bottom: 10px">
            <AssemblyItem type="固态硬盘" :index="addAssStore.ssd_index" :data="addAssStore.ssd_Info" />
        </div>
        <div style="margin-bottom: 10px">
            <AssemblyItem type="硬盘" :index="addAssStore.hdd_index" :data="addAssStore.hdd_Info" />
        </div>
        <div class="bottom">
            <div>
                <el-button size="small" @click="save" style="font-weight: bold" type="primary" plain>保 存</el-button>
                <el-button size="small" @click="reset" style="font-weight: bold" type="danger" plain>重 置</el-button>
            </div>
            <div>
                <span style="font-size: 12px">综合评分: </span>
                <span style="font-weight: bold; color: forestgreen; font-size: 16px">{{ addAssStore.score }} / 60</span>
            </div>
            <div>
                <span style="font-size: 12px">合计</span>
                <span style="font-weight: bold; color: red; font-size: 16px">￥{{ addAssStore.total }}</span>
            </div>
        </div>
    </div>

    <el-dialog v-model="dialog" title="配置名" width="500" align-center>
        <el-input v-model="title" style="width: 100%" maxlength="10" placeholder="输入配置名" show-word-limit type="text" />
        <template #footer>
            <div class="dialog-footer">
                <el-button  @click="dialog = false">取 消</el-button>
                <el-button type="success" @click="submit"> 提交 </el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import AssemblyItem from './Sub/AssemblyItem.vue'
import { useAddAssStore } from '@/store/useAddAssStore';
import { useTabStore } from '@/store/useTabStore';
import { postConfig } from "@/server/home/http"
import { ref } from 'vue';
import { ElNotification } from 'element-plus'
const addAssStore = useAddAssStore();
const tabStore = useTabStore();
const dialog = ref(false);
const title = ref('');

const reset = () => {

    addAssStore.reset();
}

const save = () => {
    //判断是否登录
    if (!tabStore.loginStatus) {
        ElNotification({
            title: '保存失败',
            message: '请先登录',
            type: 'error',
        })
        return
    }
    //判断是否有未选择的组件
    //如果没有未选择的组件，弹出对话框
    if (addAssStore.cpu_index === "-1" || addAssStore.gpu_index === "-1" || addAssStore.memory_index === "-1" || addAssStore.mainboard_index === "-1" || addAssStore.ssd_index === "-1" || addAssStore.hdd_index === "-1") {
        dialog.value = false;
        //提示
        ElNotification({
            title: '保存失败',
            message: '请完整选择配置',
            type: 'error',
        })
    } else {
        dialog.value = true;
    }
}

const submit = async () => {
    //输入不为空
    if (!title.value) {
        return
    }
    
    const data = {
        title: title.value,
        userId: tabStore.userId,
        username: tabStore.username,
        avatar: tabStore.avatar,
        price: addAssStore.total,
        score: addAssStore.score,
        ass_id: {
            cpu_id: addAssStore.cpu_index,
            gpu_id: addAssStore.gpu_index,
            memory_id: addAssStore.memory_index,
            mainboard_id: addAssStore.mainboard_index,
            ssd_id: addAssStore.ssd_index,
            hdd_id: addAssStore.hdd_index,
        },
        ass_img: {
            cpu_img: addAssStore.cpu_Info.img_url_arr[0],
            gpu_img: addAssStore.gpu_Info.img_url_arr[0],
            memory_img: addAssStore.memory_Info.img_url_arr[0],
            mainboard_img: addAssStore.mainboard_Info.img_url_arr[0],
            ssd_img: addAssStore.ssd_Info.img_url_arr[0],
            hdd_img: addAssStore.hdd_Info.img_url_arr[0]
        }
    }

    //上传配置
    try {
        const res = await postConfig(data)
        if (res.code === 200) {
            dialog.value = false;
        }
    } catch (error) {
        console.log(error);

    }


}
</script>

<style scoped lang="scss">
.bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
    margin-bottom: 10px;
    padding: 0 5px;
}
</style>
